<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <script src="./lib/jquery.js"></script>
  </head>

  <body style="padding: 15px">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">图书表格</h3>
      </div>
      <div class="panel-body form-inline">
        <div class="input-group">
          <div class="input-group-addon">书名</div>
          <input
            type="text"
            class="form-control"
            id="iptBookname"
            placeholder="请输入书名"
          />
        </div>
        <div class="input-group">
          <div class="input-group-addon">作者</div>
          <input
            type="text"
            class="form-control"
            id="iptAuthor"
            placeholder="请输入作者"
          />
        </div>
        <div class="input-group">
          <div class="input-group-addon">出版社</div>
          <input
            type="text"
            class="form-control"
            id="iptPublisher"
            placeholder="请输入出版社"
          />
        </div>
        <button id="btnAdd" class="btn btn-primary">添加</button>
      </div>
    </div>

    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>id</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tb">
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td><a href="" data-id="${id}">删除</a></td>
        </tr>
      </tbody>
    </table>
    <script src="./lib/axios.js"></script>
    <script>
      // 获取元素
      // 获取列表盒子
      const bookList = document.querySelector('#tb')
      const bookName = document.querySelector('#iptBookname')
      const bookAuthor = document.querySelector('#iptAuthor')
      const bookPublisher = document.querySelector('#iptPublisher')
      const btnAdd = document.querySelector('#btnAdd')

      // 封装添加数据
      function renderConten(data) {
        bookList.innerHTML = data.reduce((p, item) => {
          // console.log(item);
          let { author, bookname, id, publisher } = item
          p += `<tr>
                  <td>${id}</td>
                  <td>${bookname}</td>
                  <td>${author}</td>
                  <td>${publisher}</td>
                  <td class="delete"><a href="javascript:/" data-id = ${id}>删除</a></td>
                </tr>`
          return p
        }, '')
      }

      // 封装请求列表接口
      function oneReden() {
        axios({
          url: 'http://ajax-base-api-t.itheima.net/api/getbooks',
          method: 'get',
          params: null,
        }).then(({ data: res }) => {
          let { data } = res
          // 调用添加内容的函数
          renderConten(data)
        })
      }
      // 封装添加接口
      function addBook() {
        axios({
          url: 'http://ajax-base-api-t.itheima.net/api/addbook',
          method: 'POST',
          data: {
            bookname: bookName.value.trim(),
            author: bookAuthor.value.trim(),
            publisher: bookPublisher.value.trim(),
          },
        }).then(() => {
          // 调用渲染接口
          oneReden()
        })
      }
      // 调用渲染接口
      oneReden()
      // 添加删除点击事件
      btnAdd.addEventListener('click', function () {
        // 判断不为空
        if (
          bookName.value.trim().length <= 0 ||
          bookAuthor.value.trim().length <= 0 ||
          bookPublisher.value.trim().length <= 0
        ) {
          alert('不能输入空内容')
          return
        }
        // 调用封装的删除函数
        addBook()
        // 清空输入框
        bookName.value = ''
        bookAuthor.value = ''
        bookPublisher.value = ''
      })
      // 封装删除
      // 给整个列表报道事件
      const del = document.querySelector('#tb')
      del.addEventListener('click', function (e) {
        // 判断点击A标签时才触发事件
        if (e.target.tagName === 'A') {
          // 获得自定义的id属性值
          const bookId = e.target.dataset.id
          axios({
            url: 'http://ajax-base-api-t.itheima.net/api/delbook',
            method: 'GET',
            params: {
              id: bookId,
            },
          }).then((res) => {
            // 调用渲染函数
            oneReden()
          })
        }
      })
    </script>
  </body>
</html>
